<template>
  <div class="school-info">
    <nav-bar></nav-bar>
    <div class="top clearfix">
      <div class="top-left">
        <div class="xyd-carousel-container">
          <el-carousel height="372px" trigger="click" arrow="never" :interval="5000">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="top-right">
        <div class="xyd-container">
          <div class="xyd-c-title">机构简介</div>
          <div class="xyd-c-content" style="padding:10px;height:322px;overflow:hidden">
            {{data.intro}}
          </div>
        </div>
      </div>
    </div>
    <div class="middle clearfix">
      <div class="middle-left">
        <div class="title">
          联系方式
        </div>
        <div>
          电话：{{data.phone}}<br/>
          邮箱：{{data.email}}<br/>
          地址：{{data.address}}<br/>
        </div>
      </div>
      <div class="middle-right">
        <div class="title">
          课程介绍
        </div>
        <div>
          {{data.course}}
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="xyd-container">
        <div class="xyd-c-title">师资展示</div>
        <div class="xyd-c-content clearfix">
          <teacher-card :value="item" v-for="item,i in list" :key="i"></teacher-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { NavBar } from 'views/layout'
  import { getOrgInfo } from 'api/org'
  import TeacherCard from 'views/components/teacherCard'
  export default {

    name: 'info',
    components: {
      NavBar,
      TeacherCard
    },
    data() {
      return {
        data: {},
        list: []
      };
    },
    created() {
      const { id } = this.$route.params
      getOrgInfo({
        orgid: id
      })
      .then(res => {
        console.log(res)
        this.data = res.data
        this.list = res.data.teacher
      })
      .catch(err => console.log(err))
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.school-info{
  .top{
    width: 1200px;
    margin: 0 auto;
    .top-left{
      width: 960px;
      float: left;
    }
    .top-right{
      width: 210px;
      margin-left: 20px;
      float: left;
    }
  }
  .middle{
    width: 1200px;
    margin: 0 auto;
    background-color: #F4F4F4;
    padding: 30px;
    .title{
      font-size: 20px;
      color: #999;
      margin-bottom: 20px;
    }
    .middle-left{
      float: left;
      width: 50%;
    }
    .middle-right{
      float: left;
      width: 50%;
    }
  }
  .bottom{
    width: 1202px;
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>